<template>
  <div class='perm-container'>
    <el-card class='box-card' shadow='always'>
      <div slot='header' class='clearfix'>
        <b>
          <svg-icon icon-class='menu' />
          {{ menu && menu.label ? '【' + menu.label + '】' : '' }}权限分配
        </b>
      </div>
      <el-row style='margin-bottom: 10px'>
        <el-col :span='18'>
          <el-tag v-if='role' type='primary'>{{ role.displayName }}</el-tag>
          <el-tag v-if='menu' style='margin-left: 5px' type='success'>{{ menu.label }}</el-tag>
          <el-tag v-if='!role' style='margin-left: 5px' type='info'><i class='el-icon-info' /> 请选择角色</el-tag>
          <el-tag v-if='!menu' style='margin-left: 5px' type='info'><i class='el-icon-info' /> 请选择菜单</el-tag>
        </el-col>
        <el-col :span='6' style='text-align: right'>
          <el-button
            v-has-permission="['sys:role:edit']"
            :disabled='isRoot'
            icon='el-icon-check'
            size='mini'
            type='primary'
            @click='handleSubmit'>提交
          </el-button>
        </el-col>
      </el-row>

      <div v-if='permissionList.length > 0'>
        <el-checkbox
          v-model='checkAll'
          :indeterminate='isIndeterminate'
          style='margin-top: 20px'
          @change='handleCheckAllChange'>全选
        </el-checkbox>
        <el-row>
          <el-col
            v-for='permission in permissionList'
            :key='permission.id'
            :span='12'
            style='margin-top: 20px'>
            <el-tooltip class='item' effect='dark' placement='bottom'>
              <div slot='content'>
                URL权限：{{ permission.urlPerm }}<br />按钮权限：{{ permission.btnPerm }}
              </div>
              <el-checkbox
                :key='permission.id'
                v-model='permission.checked'
                :label='permission.id'
                border
                size='mini'
                @change='handleCheckChange'
              >
                {{ permission.name }}
              </el-checkbox>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
      <div v-else style='text-align: center'>
        <svg-icon icon-class='nodata' style='width: 150px;height:150px' />
        <el-row>
          <el-link :underline='false' type='info'>{{
              !role
                ? '请选择角色'
                : !menu
                ? '请选择菜单'
                : '暂无数据，您可在【菜单管理】配置权限数据'
            }}
          </el-link>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { list as listPermission } from '@/api/admin/permission'
import { listRolePermission, updateRolePermission } from '@/api/admin/role'

export default {
  name: 'Permission',
  props: ['type'],
  data() {
    return {
      loading: false,
      ids: [],
      initialCheckedPermissionIds: [],
      menu: undefined,
      role: undefined,
      isIndeterminate: true,
      checkAll: false,
      permissionList: [],
      isRoot: false
    }
  },
  methods: {
    handleQuery() {
      this.loading = true
      const that = this
      listPermission({
        queryMode: 'list',
        menuId: this.menu.id
      }).then(response => {
        that.permissionList = response.data
        if (this.role.roleName === this.ROOT_ROLE_CODE) {
          // 如果是超级管理员默认勾选全部且不可编辑
          this.isRoot = true
          that.permissionList.map(item => this.$set(item, 'checked', true))
          this.loading = false
        } else {
          this.isRoot = false
          listRolePermission(that.role.id, { menuId: this.menu.id }).then(
            res => {
              this.initialCheckedPermissionIds = res.data
              that.permissionList.map(item => {
                if (this.initialCheckedPermissionIds.includes(item.id)) {
                  item.checked = true
                }
              })

              const checkedCount = this.permissionList.filter(item => item.checked).length
              this.checkAll = checkedCount === this.permissionList.length
              this.isIndeterminate = checkedCount > 0 && checkedCount < this.permissionList.length

              this.$forceUpdate()
              this.loading = false
            }
          )
        }
      })
    },
    menuClick(menu, role) {
      this.role = role
      this.menu = menu

      if (role && menu) {
        this.handleQuery()
      } else {
        this.permissionList = []
        this.initialCheckedPermissionIds = []
      }
    },
    handleSubmit: function() {
      const checkedPermissionIds = this.permissionList
        .filter(item => item.checked)
        .map(item => item.id)
      // 判断选中权限是否变动
      if (
        this.initialCheckedPermissionIds.length ===
        checkedPermissionIds.length &&
        this.initialCheckedPermissionIds.sort().every(function(v, i) {
          return v === checkedPermissionIds[i]
        })
      ) {
        this.$message.warning('数据未变动')
        return
      }
      const data = {
        menuId: this.menu.id,
        permissionIds: checkedPermissionIds
      }
      updateRolePermission(this.role.id, data).then(response => {
        this.$message.success('提交成功')
      })
    },
    handleCheckAllChange(checked) {
      if (checked) {
        this.permissionList.map(item => (item.checked = true))
      } else {
        // 全不选
        this.permissionList.map(item => (item.checked = false))
      }
      this.isIndeterminate = false
    },
    handleCheckChange() {
      const checkedCount = this.permissionList.filter(item => item.checked).length
      this.checkAll = checkedCount === this.permissionList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.permissionList.length
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.perm-container {
  margin-bottom: 20px;
}
</style>
